<template>
	<view class="padding-lr padding-top-sm" v-if="assetsList.length != 0">
		<view class="font-11 text-black9 margin-bottom-xs">
			需支付{{(orderDetail.orderAmount*0.9).toFixed(2)}}元 + {{(orderDetail.orderAmount*0.1).toFixed(2)}}元价值资产
		</view>
		<scroll-view scroll-x class="w-100 border-bottom padding-bottom">
			<radio-group @change="changeRadio">
				<label>
					<view class="flex">
						<view class="font-12 text-black3 margin-right pr" v-for="(item, index) in assetsList" :key="index">
							<radio activeBackgroundColor="#e60000" iconColor="#ffffff" activeBorderColor="#ffffff" :value="item.assetsId" :checked="check" class="assetRadio" @click="handleCheck"/>
							<view>
								<image :src="item.assetsAccessUrl" class="img-230 radius-10"></image>
							</view>
							<view class="margin-top-xs">
								{{item.assetsName}}
							</view>
							<view>资产总数：{{item.assetsNum}}</view>
							<view>今日最低价：{{item.assetsAvgPrice}}</view>
							<view>资产价值：{{item.assetsTotalPrice}}</view>
						</view>
					</view>
				</label>
			</radio-group>
		</scroll-view>
	</view>
</template>

<script>
	import {
		customerAssets
	} from '@/common/api/customer.js'
	export default {
		props: {
			orderDetail: {},
			payMethod: ''
		},
		data() {
			return {
				assetsList: [],
				check: false
			}
		},
		created() {
			this.getCustomerAssets()
		},
		methods: {
			handleCheck() {
				this.check = !this.check
				if(!this.check) {
					this.$emit('selectAsset', '')
				}
			},
			changeRadio(e) {
				this.$emit('selectAsset', e.detail.value)
			},
			// 用户资产查询
			getCustomerAssets() {
				customerAssets().then(res => {
					if(res.code == 200) {
						this.assetsList = res.data || []
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.assetRadio {
		position: absolute;
		right: 0;
		top: 16rpx;
		z-index: 10;
	}
</style>